<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const showDetail = (id, name) => {
  router.push({ path: `/showDetail/${id}/${name}` })
}

const showDetail2 = (id, name) => {
  // router.push(`/showDetail2?id=${id}&name=${name}`)
  router.push({ path: '/showDetail2', query: { id: id, name: name } })
}
</script>

<template>
  <div>
    <!-- 1.声明式路由路径传参 -->
    <router-link to="/showDetail/1/java">传递路径参数</router-link> <br>
    <!-- 2.编程式路由路径传参 -->
    <button @click="showDetail(2, 'php')">showDetail动态路由路径传参显示JAVA</button>
    <router-view></router-view>

    <!-- 1.声明式路由键值对传参 -->
    <router-link to='/showDetail2?id=2&name=python2'>传递键值对参数</router-link> <br>
    <router-link :to="{ path: '/showDetail2', query: { id: 3, name: 'python' } }">传递键值对参数</router-link> <br>
    <!-- 2.编程式路由键值对传参 -->
    <button @click="showDetail2(4, 'python')">go1</button>
    <button @click="showDetail2(4, 'python')">go2</button>
  </div>
</template>

<style scoped></style>
